<template>
	<div>
    <el-row :gutter="20">
      <el-col :span="col_span_content">

        <el-row class="title">
          <a :href="msg.url">{{msg.title}}</a>
        </el-row>

        <el-row class="content">
          {{msg.content}}
        </el-row>

      </el-col>

      <el-col :span="col_span_picture" class="col_span_picture">
        <el-image
            style="width: 150px; height: 100px"
            :src="msg.img"
            :fit="'cover'">
        </el-image>
      </el-col>
    </el-row>

    <el-row>
      <el-row class="status">
          <span class="status-item">
            <i class="el-icon-coin" style="color: goldenrod"><span style="color: #B4B4B4">&nbsp;{{msg.coins}}</span></i>
          </span>

        <span class="status-item">
            <span><a href="javascript:void(0)" @click="checkAuth(msg.username)">{{msg.username}}</a></span>
          </span>

        <span class="status-item">
            <i class="el-icon-chat-dot-square">&nbsp;{{msg.commentCount}}</i>
          </span>

        <span class="status-item">
            <i class="el-icon-star-on" style="color: #ea6f5a"><span style="color: #B4B4B4">&nbsp;{{msg.like}}</span></i>
          </span>
      </el-row>
    </el-row>


    <el-divider/>
  </div>
</template>

<script>
  export default {
    name: "MediaObject",
    data() {
      return {
        img: '',
        col_span_content: 24,
        col_span_picture: 0,
      }
    },

    //用于接收父组件的值;  props的内容无法修改!
    props: {
      msg: {
        type: Object,
      }
    },
    methods: {
      checkAuth(auth) {
        alert('即将查看作者:'+auth);
      },
    },
    created() {
      if (this.msg.img === '' || this.msg.img === null) {
        this.col_span_content = 24;
        this.col_span_picture = 0;
      }else {
        this.col_span_content = 17;
        this.col_span_picture = 7;
      }
    }
  }
</script>

<style scoped lang="less">

  .el-image {
    border-radius: 5px;
  }

  .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    >a {
      color: #333333;
    }
  }

  .content {
    margin: 3px 0;
    font-size: 13px;
    line-height: 24px;
    color: #999;
    > .i{
      margin-right: 2px;
    }
  }

  .status {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #B4B4B4;
    margin-top: 5px;
  }

  .status-item{
    margin-right: 18px;
    span {
      a {
        color: #B4B4B4;
        text-decoration:none;
      }
    }
  }

  .el-divider {
    width: 100%;
    margin: 17px 0;
  }

  .col_span_picture {
    margin-top: 15px;
  }

</style>